<template>
	<wsPage title="banner列表">
		<div slot="page_operate">
			<Button  @click="refresh()"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="名称搜索">
			            <Input v-model="queryForm.name" placeholder="请输入名称"></Input>
			        </FormItem>
			        <FormItem label="发布类型">
			            <Select clearable v-model="queryForm.status" placeholder="请选择" class="ws-form-select">
							<Option value="1">已发布</Option>
							<Option value="0">未发布</Option>
						</Select>
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<!-- <Button  @click="outLink">外部链接</Button>
				<Button  @click="insideLink">本地链接</Button> -->
				<Button  @click="addShow">新增</Button>
				<Button  :disabled="!isTableSelected" @click="batchDel">批量删除</Button>
				<!-- <Button  :disabled="!isTableSelected" @click="batchAdded">批量发布</Button>
				<Button  :disabled="!isTableSelected" @click="batchUnShelve">批量取消发布</Button> -->
			</div>
			<div slot="list_data">
				<Table :columns="table.columns" :data="table.data" @on-selection-change="tableSelected"></Table>
			</div>
		</wsSmPanel>
	</wsPage>
</template>
		
		<!--详情界面-->
		<!-- <el-dialog :title="detailsFormTitle" v-model="detailsFormVisible" :close-on-click-modal="false">
			<el-form :model="detailsForm" label-width="100px" :rules="detailsFormRules" ref="detailsForm">
				<el-row class="demo-autocomplete">
					<el-col :span="12">
						<div>
							<el-form-item label="标题" prop="title">
								<span class="form-control-static" v-text="detailsForm.title"
								name="title"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-form-item label="推广位置" prop="positionValue">
								<span class="form-control-static" v-text="detailsForm.positionValue"
								name="positionValue"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="24">
						<div>
							<el-form-item label="图片" prop="fileId">
								<img v-if="null != detailsForm.fileId && typeof detailsForm.fileId != 'undefined'&&'' != detailsForm.fileId":src="'/ws/img/view/'+detailsForm.fileId" style="width:60%; height:200px; border-radius: 6px;">
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-form-item label="推广类型" prop="moduleTypeValue">
								<span class="form-control-static" v-text="detailsForm.moduleTypeValue"
								name="moduleTypeValue"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-form-item label="url" prop="url">
								<span class="form-control-static" v-text="detailsForm.url"
								name="url"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-form-item label="创建人" prop="createName">
								<span class="form-control-static" v-text="detailsForm.createName"
								name="createName"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-form-item label="创建时间" prop="createDateStr">
								<span class="form-control-static" v-text="detailsForm.createDateStr"
								name="createDateStr"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-form-item label="修改人" prop="updateName">
								<span class="form-control-static" v-text="detailsForm.updateName"
								name="updateName"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-form-item label="修改时间" prop="updateDateStr">
								<span class="form-control-static" v-text="detailsForm.updateDateStr"
								name="updateDateStr"></span>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="24">
						<div>
							<span style="padding-left:60px;">备注</span>
							<el-form-item prop="content" style="margin-left: 100px;height: 200px; overflow:auto;">
								<span class="form-control-static" v-html="detailsForm.content"
								name="content"></span>
							</el-form-item>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="detailsFormVisible = false">关  闭</el-button>
			</div>
		</el-dialog> -->



<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
  				//条件查询
				queryForm: {
					title: '',
					status: ''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                    	title: '标题',
                    	key: 'title',
                    	align: 'center'
                    },
                    {
                        title: '链接类型',
                        key: 'banenrType',
                        align: 'center',
                        render : (h, params) => {
                        	// return params.row.banenrType==1?"外部链接":"本地链接";
                        	return h('span', {                   		
                        	}, params.row.bannerType==1?'外部链接':'本地链接')
                        }
                    },
                    {
                    	title: '链接模块',
                    	key: 'moduleType',
                    	align: 'center',
                    	render : (h, params) => {
                    		if (params.row.banenrType==1 && params.row.moduleType == null || params.row.moduleType == 0) {
                    			return h('div', [h('Button', {
                    				props: {
                    					type: 'text',
                    					size: 'small'
                    				}
                    			},'链接URL')]);
                    		}else if (params.row.moduleType == 1) {
                    			return h('div', [h('Button', {
                    				props: {
                    					type: 'text',
                    					size: 'small'
                    				}
                    			},'基地')]);
                    		}else if (params.row.moduleType == 2) {
                    			return h('div', [h('Button', {
                    				props: {
                    					type: 'text',
                    					size: 'small'
                    				}
                    			}, '资讯')]);
                    		}else if(params.row.moduleType == 3){
                    			return h('div', [h('Button', {
                    				props: {
                    					type: 'text',
                    					size: 'small'
                    				}
                    			}, '商品')]);
                    		}else if(params.row.moduleType == 4){
                    			return h('div', [h('Button', {
                    				props: {
                    					type: 'text',
                    					size: 'small'
                    				}
                    			}, '健康项目')]);
                    		}else if(params.row.moduleType == 5){
                    			return h('div', [h('Button', {
                    				props: {
                    					type: 'text',
                    					size: 'small'
                    				}
                    			}, '健康项目预约')]);
                    		}else if(params.row.moduleType == 6){
                    			return h('div', [h('Button', {
                    				props: {
                    					type: 'text',
                    					size: 'small'
                    				}
                    			}, '视频')]);
                    		}
                    	}
                    },
					{
						title: '发布状态',
                        key: 'status',
                        align: 'center',
                        /*render : (h, params) => {
                    		return params.row.status==0?"未发布":"已发布";
                    	}*/
                    	render: (h, params) => {
                        	return h('i-switch', {
                        		props: {
                        			value: params.row.status == '1'
                        		},
                        		on: {
                        			'on-change': (state) => {
                        				this.settingSelfSupport(state, params.row.id);
                        			}
                        		}
                        	})
                        }
					}, 
					{
						title: 'url',
						key: 'url',
						align: 'center'
					},{
						title: '操作',
						fixed: 'right',
						width: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										let rowId = params.row.id;
                                		this.showEditModal(rowId);
									}
								}
							}, '编辑')/*,h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										let rowId = params.row.id;
                                		this.showEditModal(rowId);
									}
								}
							}, '详情')*/])
						}
					}],
					data: [],
					page: {
						total: 0, 		//总条数
						pageNum: 1, 	//当前页
						pageSize: 10 	//每页显示条数
					},
					selection: [] 		//选中
				},	
				statusVO: {
					id: null,
					status: null
				},
				//新增类型弹框
				bannerModal: {
					show: false,
					form: {
						id: null,
						title: '',
						bannerType: null,
						moduleType: null,
						status: null,
						url: ''
					}
				}
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
		      return !Util.vad.isBlank(this.bannerModal.form.id);
		    }
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ops/banners?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 刷新页面
			 */
			refresh(){
				this.queryForm.title = '';
				this.queryForm.status = null;
				this.table.page.pageNum = 1;
				this.query();
			},
			/**
			 * 清空初始状态值
			 */
			resetSelfSupportData(){
				this.bannerModal.form.id = '';
				this.bannerModal.form.status = '';
			},
			/**
			 * 发布取消发布
			 */
			settingSelfSupport(state, id){
				this.resetSelfSupportData();
				this.statusVO.status = state ? 1 : 0;
				this.statusVO.id=id;
				let postData_ = this.statusVO;
				const _this = this;
				_this.axios.put('/ws/ops/banners', postData_).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.$Message.success('修改发布状态成功');
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('修改发布状态失败:' + message_);
					}
					_this.init();
				});
			},
            /**
			 * 打开新增模态框
			 */
			addShow(){
				this.$router.push({name: 'ops_banner_edit'});
			},
			/**
			 * 打开编辑模态框
			 */
			showEditModal(rowId){
				this.$router.push({name: 'ops_banner_edit',query: {id: rowId}});
			},
			/**
			 * 根据id查询
			 */
			queryById(rowId){
				this.$router.push({name: 'ops_banner_detail',query: {id: rowId}});
			},
			/**
			 * 批量删除提示
			 */
			batchDel() {
				let ids = [];
				this.table.selection.forEach((item) => {
			      ids.push(item.id);
			    });
				if(ids.length < 1){
					this.$Message.warning('请选择要删除的数据');
					return;
				}
				const _this = this;
				this.$confirm({
        			content: '你确认删除选中数据吗?',
        			onOk: function() {
        				_this.batchDelRow();
        			}
        		});
			},
			/**
			 * 批量删除
			 */
			batchDelRow(){
				let ids = [];
				this.table.selection.forEach((item) => {
			      ids.push(item.id);
			    });
				if(ids.length < 1){
					this.$Message.warning('请选择要删除的数据');
					return;
				}
				const _this = this;
				this.axios.post('/ws/ops/banners/batchDel',ids).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
						_this.table.selection = [];
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除失败:' + message_);
					}	
			    });	
			},
			
			/**
			 * 批量上架
			 */
			batchAdded(){
				let ids = [];
				this.table.selection.forEach((item) => {
					ids.push(item.id);
				});
				if(ids.length < 1){
					this.$Message.warning('请选择要上架的数据');
					return;
				}
				const _this = this;
				this.axios.post('/ws/ops/banners/batchAdded', ids).then(function(response) {
					let res = response.data;
					if (0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
						_this.table.selection = [];
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('上架失败');
					}
				});
			},

			/**
			 * 批量下架
			 */
			batchUnShelve(){
				let ids = [];
				this.table.selection.forEach((item) => {
					ids.push(item.id);
				});
				if (ids.length < 1) {
					this.$Message.warning('请选择要下架的数据');
					return;
				}
				const _this = this;
				this.axios.post('/ws/ops/banners/batchUnShelve', ids).then(function(response) {
					let res = response.data;
					if (0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
						_this.table.selection = [];
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('下架失败');
					}
				});
			},

			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			}
		}
	}
</script>
<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>
